﻿@{
    ViewData["Title"] = "主页";
}

<!-- preloader-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_four"></div>
        </div>
    </div>
</div>

<!--search-body-->
<div class="search-area">
    <div class="close-search">
        <span></span>
        <span></span>
    </div>
    <form action="#" class="search-form">
        <input type="text" name="search" placeholder="Write & Press Enter">
        <button><i class="fas fa-search"></i></button>

    </form>
</div>

<!-- start header section -->
<header class="header style3 transparent-header">

    <!-- main menu area -->
    <div class="main-menu-area animated box-shadow-bottom">
        <div class="mega-menu-header">
            <div class="row m-0 align-items-center">
                <div class="col-lg-2 d-flex align-items-center justify-content-between p-0">
                    <div class="logo">
                        <a class="navbar-brand" href="index.html"><img src="assets/images/logo-black.png" alt="logo"></a>
                        <a class="navbar-brand navbar-brand2" href="index.html"><img src="assets/images/logo-white.png" alt="logo"></a>
                    </div>
                    <div class="menu-bar d-lg-none">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="col-lg-10 d-none d-lg-block p-0 d-lg-flex align-items-center justify-content-end">
                    <ul class="custom-border-top nav-menu d-lg-flex flex-wrap list-unstyled m-0 justify-content-center">
                        <li class="nav-item active"><a href="/"><span>主页</span></a></li>
                        <li class="nav-item"><a href="/about"><span>关于我们</span></a></li>
                        <li class="nav-item"><a href="/services"><span>产品与服务</span></a></li>
                        <li class="nav-item"><a href="/news"><span>新闻资讯</span></a></li>
                        <li class="nav-item"><a href="/cooperation"><span>商务合作</span></a></li>
                        
                        
                    </ul> 
                </div>
            </div>


            <!-- mobile menu area-->
            <div class="mobile-menu-area d-lg-none">
                <div class="m-menu-header">
                    <a href="#" class="logo"><img src="assets/images/logo-white.png" alt="logo"></a>
                    <span class="close-bar">
                        <span></span>
                        <span></span>
                    </span>
                </div>
                <div class="mobile-menu">
                    <ul class="m-menu">
                        <li><a href="/">主页</a></li>
                        <li><a href="/about">关于我们</a></li>
                        <li><a href="/services">产品与服务</a></li>
                        <li><a href="/news">新闻资讯</a></li>
                        <li><a href="/cooperation">商务合作</a></li>
                        
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- end header section -->
<!-- banner section start -->
<section class="da-banner-section d-flex align-items-center">
    <div class="custom-bubble-animation d-none d-lg-block">
        <div class="cb1"></div>
        <div class="cb2"></div>
        <div class="cb3"></div>
        <div class="cb4"></div>
        <div class="cb5"></div>
        <div class="cb6"></div>
        <div class="cb7"></div>
        <div class="cb8"></div>
        <div class="cb9"></div>
        <div class="cb10"></div>
    </div>
    <div class="banner-pattern">
        <img src="assets/images/index3/banner-pattarn.png" alt="pattern">
    </div>
    <ul class="social-media-list d-none d-md-block m-0 list-unstyled">
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a href="#"><i class="fab fa-behance"></i></a></li>
        <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
    </ul>
    <div class="container w-100">
        <div class="banner-container text-center pb-5 pt--100">
            <h2 class="mb-4">
                Better <span>Value,</span>
                <br>Better Experience.
            </h2>
            <p class="mb-lg-3 pb-3">Okala is a multipurpose theme bundle & it's their digital agency homepage. Have a try to the digital agency item for multipurpose useges</p>
            <div class="btn-group">
                <a href="#" class="da-custom-btn2 btn-solid btn-border-radius40 m-2"><span>Try It Now</span></a>
                <a href="#" class="da-custom-btn btn-solid btn-border-radius40 m-2"><span>Explore More</span></a>
            </div>
        </div>
    </div>
    <div class="banner-pattern2">
        <img src="assets/images/index3/banner-pattarn.png" alt="pattern">
    </div>
</section>
<!-- banner section end -->
<!--  section working process start  -->
<section class="da-working-process-section bg-ash pt--60 pb--60 pt_lg--100 pb_lg--100 position-relative">
    <div class="shape1">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 126">
            <path id="XMLID_133_" class="st0" d="M40.9,117C5.4,99.5-9.1,56.5,8.4,21.1c17.5-35.4,43.2-15.5,78.7,2.1s67.2,26,49.6,61.4
            C119.2,120,76.3,134.5,40.9,117z" />
        </svg>
    </div>
    <div class="circle1">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_11_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="container position-relative">
        <div class="section-header text-center mb--60 mb_lg--0">
            <h6 class="subtitle-top font-weight-normal mb-2">How We Work</h6>
            <h3 class="title mb-3">
                We design brand, digital<br>
                experience that engage the right customers.
            </h3>
        </div>
    </div>
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-4 mb--60 mb_lg--0">
                <div class="working-process-control-tab">
                    <div class="da-working-process-control nav" id="myTab1" role="tablist">

                        <a class="active" id="plan-tab" data-toggle="tab" href="#plan" role="tab" aria-controls="plan" aria-selected="true">
                            <span class="w-100 d-flex justify-content-between align-items-center heading"><span class="left-text">Plan</span><span class="down-arrow"></span></span>
                            <p class="text">We communicate with clients, sit for meetings, gather all detailed data & analyze the requirements. Planning is the main and prime part of planning any projects.</p>
                        </a>



                        <a class="" id="priority-tab" data-toggle="tab" href="#priority" role="tab" aria-controls="priority" aria-selected="true">
                            <span class="w-100 d-flex justify-content-between align-items-center heading"><span class="left-text">Priority</span><span class="down-arrow"></span></span>
                            <p class="text">Here variables of all projects are defined, UX is guideline prepared and the product is roughly designed. Then priority based all deadlines are set for the project.</p>
                        </a>

                        <a class="" id="create-tab" data-toggle="tab" href="#create" role="tab" aria-controls="create" aria-selected="true">
                            <span class="w-100 d-flex justify-content-between align-items-center heading"><span class="left-text">Create</span><span class="down-arrow"></span></span>
                            <p class="text">The rough sketch is analyzed thoroughly and submitted the report, then product development started. Okala create fine finishing products for our beloved clients.</p>
                        </a>

                        <a class="" id="publish-tab" data-toggle="tab" href="#publish" role="tab" aria-controls="publish" aria-selected="true">
                            <span class="w-100 d-flex justify-content-between align-items-center heading"><span class="left-text">Publish</span><span class="down-arrow"></span></span>
                            <p class="text">Product is delivered to the client after completing it successfully. Client satisfaction is all. We publish the work after the clients approval. All small details are checked.</p>
                        </a>

                        <a class="" id="measure-tab" data-toggle="tab" href="#measure" role="tab" aria-controls="measure" aria-selected="true">
                            <span class="w-100 d-flex justify-content-between align-items-center heading"><span class="left-text">Measure</span><span class="down-arrow"></span></span>
                            <p class="text">The finished product is given to the data analysis team for further improvement and research. Every change and responses are recorded and then measure with high tech.</p>
                        </a>


                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="tab-content" id="myTab1Content">
                    <div class="tab-pane fade active show" id="plan" role="tabpanel" aria-labelledby="plan-tab">
                        <div class="da-working-process-container">
                            <div class="image">
                                <img src="assets/images/digital-agency/working-process/03.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="priority" role="tabpanel" aria-labelledby="priority-tab">
                        <div class="da-working-process-container">
                            <div class="image">
                                <img src="assets/images/digital-agency/working-process/04.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="create" role="tabpanel" aria-labelledby="create-tab">
                        <div class="da-working-process-container">
                            <div class="image">
                                <img src="assets/images/digital-agency/working-process/04.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="publish" role="tabpanel" aria-labelledby="publish-tab">
                        <div class="da-working-process-container">
                            <div class="image">
                                <img src="assets/images/digital-agency/working-process/02.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="measure" role="tabpanel" aria-labelledby="measure-tab">
                        <div class="da-working-process-container">
                            <div class="image">
                                <img src="assets/images/digital-agency/working-process/06.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--  section working process end  -->
<!--  about us section start -->
<section class="aboutus-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 order-lg-last offset-lg-1">
                <div class="section-header text-center text-lg-left mb--60 mb-lg-0">
                    <h6 class="subtitle-top font-weight-normal mb-2">Why Choose Us</h6>
                    <h3 class="title mb-3">
                        We help build identities
                        fromconcept to launch.
                    </h3>
                    <p class="subtitle mb-5">Okala proudly announced that we are active for more than 5 years in the field of business. From the start, we have completed 2000+ pro jects. Okala is also gifted with 125+ happy satisfied clients. We are lucky to be a part of this huge client base! </p>
                    <a href="#" class="da-custom-btn btn-border-radius40"><span>Get Started</span></a>
                </div>
            </div>
            <div class="col-lg-6 order-lg-first">
                <div class="joint-image ml_lg--175">
                    <img src="assets/images/digital-agency/aboutus/01.jpg" alt="image">
                    <img class="position-image" src="assets/images/digital-agency/aboutus/02.jpg" alt="image">
                </div>
            </div>
        </div>
    </div>
</section>
<!--  about us section end -->
<!-- service section start -->
<section class="service-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container mb-5 pb-3">
        <div class="row align-items-center">
            <div class="col-lg-5">
                <div class="section-header text-center text-lg-left">
                    <h6 class="subtitle-top">Services</h6>
                    <h3 class="title">
                        We craft<br>
                        beautiful digital solutions<br>
                        for awesome clients across<br>
                        all the platforms.
                    </h3>
                </div>
            </div>
            <div class="col-lg-4 offset-lg-3  text-center text-lg-left">
                <p class="mb-0">Okala is a multipurpose WordPress theme template. If you want your dream business to give a magnificent digital look, then you are welcome to visit Okala templates and pick your desired website.</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box violet">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon icon-Light-Bulb2"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style violet">Smart integration</h6>
                    <p class="mb-0">These widgets are so customizable, you can literally create blocks that can perfectly fit with your existing website designs</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box yellow">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon  icon-Cloud-Settings"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style yellow">Get support</h6>
                    <p class="mb-0">We're here to stay for a long time, and we want to do that with full satisfaction from our users. You will always receive professional.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box green">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon icon-Edit-Map"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style green">Rich feature set</h6>
                    <p class="mb-0">These widgets are flexible and feature rich, allowing you to modify every bit of look-n-feel to help you build great looking website easily.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box orange">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon icon-Laptop-Secure"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style orange">Quick presets</h6>
                    <p class="mb-0">You don’t need to modify every field to get a cool look. With our powerful preset engine, getting a new look is just a matter of seconds</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box blue">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon icon-Atom"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style blue">Fast growing addons pack</h6>
                    <p class="mb-0">We will continuously update this widgets collection with new features and widgets every week, and it will blow your mind.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="da-service-item">
                    <div class="icon-box pink">
                        <svg class="icon-box-svg" x="0px"
                             y="0px" viewBox="0 0 131.5 109.3">
                            <circle class="st0" cx="11.2" cy="9.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="9.7" r="1.3" />
                            <circle class="st0" cx="43" cy="9.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="9.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="9.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="9.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="9.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="9.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="27.7" r="1.3" />
                            <circle class="st0" cx="27.1" cy="27.7" r="1.3" />
                            <circle class="st0" cx="43" cy="27.7" r="1.3" />
                            <circle class="st0" cx="58.9" cy="27.7" r="1.3" />
                            <circle class="st0" cx="74.8" cy="27.7" r="1.3" />
                            <circle class="st0" cx="90.7" cy="27.7" r="1.3" />
                            <circle class="st0" cx="106.6" cy="27.7" r="1.3" />
                            <circle class="st0" cx="122.5" cy="27.7" r="1.3" />
                            <circle class="st0" cx="11.2" cy="45.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="45.8" r="1.3" />
                            <circle class="st0" cx="43" cy="45.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="45.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="45.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="45.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="45.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="45.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="63.8" r="1.3" />
                            <circle class="st0" cx="27.1" cy="63.8" r="1.3" />
                            <circle class="st0" cx="43" cy="63.8" r="1.3" />
                            <circle class="st0" cx="58.9" cy="63.8" r="1.3" />
                            <circle class="st0" cx="74.8" cy="63.8" r="1.3" />
                            <circle class="st0" cx="90.7" cy="63.8" r="1.3" />
                            <circle class="st0" cx="106.6" cy="63.8" r="1.3" />
                            <circle class="st0" cx="122.5" cy="63.8" r="1.3" />
                            <circle class="st0" cx="11.2" cy="81.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="81.9" r="1.3" />
                            <circle class="st0" cx="43" cy="81.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="81.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="81.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="81.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="81.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="81.9" r="1.3" />
                            <circle class="st0" cx="11.2" cy="99.9" r="1.3" />
                            <circle class="st0" cx="27.1" cy="99.9" r="1.3" />
                            <circle class="st0" cx="43" cy="99.9" r="1.3" />
                            <circle class="st0" cx="58.9" cy="99.9" r="1.3" />
                            <circle class="st0" cx="74.8" cy="99.9" r="1.3" />
                            <circle class="st0" cx="90.7" cy="99.9" r="1.3" />
                            <circle class="st0" cx="106.6" cy="99.9" r="1.3" />
                            <circle class="st0" cx="122.5" cy="99.9" r="1.3" />
                        </svg>
                        <span class="icon icon-Conservation"></span>
                        <span class="circle-box"></span>
                    </div>
                    <h6 class="mb-3 custom-border-style pink">All cohesive elements</h6>
                    <p class="mb-0">The elements of this pack are well structured, consistent and work beautifully with other widgets to create beautiful designs together.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- service section end -->
<!--  fun fact section start -->
<section class="fac-fact-section pt--60 pb--60 pt_lg--100 pb_lg--100 position-relative">
    <div class="custom-circle-box">
        <div class="big-circle"></div>
        <div class="inner-circle1"></div>
        <div class="inner-circle2"></div>
    </div>
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-5 order-lg-last offset-lg-1">
                <div class="section-header text-center text-lg-left mb--60 mb_lg--0">
                    <h6 class="subtitle-top font-weight-normal mb-2">Why Choose Us</h6>
                    <h3 class="title mb-3">
                        We help build identities
                        fromconcept to launch.
                    </h3>
                    <p class="subtitle mb-5">Okala proudly announced that we are active for more than 5 years in the field of business. From the start, we have completed 2000+ projects. Okala is also gifted with 125+ happy satisfied clients. We are lucky to be a part of this huge client base!</p>
                    <a href="#" class="da-custom-btn btn-border-radius40"><span>Get Started</span></a>
                </div>
            </div>

            <div class="col-lg-6 order-lg-first">
                <div class="row">
                    <div class="col-md-6">
                        <div class="funfact-item d-flex align-items-start">
                            <div class="icon"><span class="icon-Add-User"></span></div>
                            <div class="funfact-content">
                                <div class="counter">1002</div>
                                <p class="mb-0">Clients</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="funfact-item d-flex align-items-start">
                            <div class="icon"><span class="icon-Eye-2"></span></div>
                            <div class="funfact-content">
                                <div class="counter">2345</div>
                                <p class="mb-0">Projects</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="funfact-item d-flex align-items-start">
                            <div class="icon"><span class="icon-Diploma-2"></span></div>
                            <div class="funfact-content">
                                <div class="counter">1231</div>
                                <p class="mb-0">Awards</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="funfact-item d-flex align-items-start">
                            <div class="icon"><span class="icon-Business-ManWoman"></span></div>
                            <div class="funfact-content">
                                <div class="counter">765</div>
                                <p class="mb-0">Employee</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--  fun fact section end -->
<!-- portfolio-section start-->
<section class="da-portfolio-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container">
        <div class="section-header pl-lg-4 mb-5  text-center text-lg-left">
            <h5 class="subtitle-top">What We'have Done</h5>
            <h3 class="title mb-4">
                We help build<br>
                identities from concept to launch.
            </h3>
        </div>
    </div>
    <div class="container">
        <div class="da-portfolio-catagory-list mb-5">
            <ul class="portfolio-tab-control nav justify-content-center justify-content-lg-start" id="myTab2" role="tablist">
                <li>
                    <a class="active" id="step1-tab" data-toggle="tab" href="#step1" role="tab" aria-controls="step1" aria-selected="true">Branding</a>
                </li>
                <li>
                    <a id="step2-tab" data-toggle="tab" href="#step2" role="tab" aria-controls="step2" aria-selected="false">3D Design</a>
                </li>
                <li>
                    <a id="step3-tab" data-toggle="tab" href="#step3" role="tab" aria-controls="step3" aria-selected="false">Development</a>
                </li>
                <li>
                    <a id="step4-tab" data-toggle="tab" href="#step4" role="tab" aria-controls="step4" aria-selected="false">Marketing Online</a>
                </li>
                <li>
                    <a id="step5-tab" data-toggle="tab" href="#step5" role="tab" aria-controls="step5" aria-selected="false">Web Design</a>
                </li>
                <li>
                    <a id="step6-tab" data-toggle="tab" href="#step6" role="tab" aria-controls="step6" aria-selected="false">Photography</a>
                </li>
                <li>
                    <a id="step7-tab" data-toggle="tab" href="#step7" role="tab" aria-controls="step7" aria-selected="false">Illustration</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-lg-12 overflow-hidden">
        <div class="tab-content" id="myTab2Content">
            <div class="tab-pane fade active show" id="step1" role="tabpanel" aria-labelledby="step1-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/digital-agency/portfolio/01.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Branding</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/09.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Branding</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/03.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Branding</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/04.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Branding</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/05.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">3D Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/06.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">3D Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/07.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">3D Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/08.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">3D Design</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/09.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Development</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/10.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Development</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/11.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Development</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/01.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Development</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step4" role="tabpanel" aria-labelledby="step4-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/01.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Marketing Online</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/07.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Marketing Online</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/03.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Marketing Online</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/04.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Marketing Online</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step5" role="tabpanel" aria-labelledby="step5-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/05.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Web Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/06.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Web Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/07.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Web Design</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/08.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Web Design</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step6" role="tabpanel" aria-labelledby="step6-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/09.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Photography</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/10.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Photography</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/11.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Photography</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/01.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Photography</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="step7" role="tabpanel" aria-labelledby="step7-tab">
                <div class="da-portfolio-container">
                    <div class="da-portfolio-swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-active">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/01.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Illustration</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/04.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Illustration</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/05.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Illustration</a>
                                            <h6><a href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div><div class="swiper-slide">
                                <div class="portfolio-item">
                                    <div class="portfolio-thumb">
                                        <a href="#"><img src="assets/images/homepage-agency/portfolio/06.jpg" alt="thumb"></a>
                                        <div class="portfolio-content">
                                            <a href="#" class="cata">Illustration</a>
                                            <h6><a class="title" href="#">Simple and Effective</a></h6>
                                            <a href="#" class="discover-more-btn">Discover More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <!-- navigation -->
                    <div class="portfolio-next-btn">
                        <i class="icon-Arrow-OutRight"></i>
                    </div>
                    <div class="portfolio-prev-btn">
                        <i class="icon-Arrow-OutLeft"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- portfolio-section start-->
<!--  team section start -->
<section class="da-team-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="circle1">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_12_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="circle2">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_13_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="circle3">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_14_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="container">
        <div class="row m-0 align-items-center">
            <div class="col-lg-4 p-0 order-lg-last">
                <div class="section-header text-center text-lg-left pb--60 pb_lg--0">
                    <h6 class="subtitle-top font-weight-normal mb-2">Meet the Team</h6>
                    <h3 class="title mb-3">
                        We’re small friendly
                        and Talented Team.
                    </h3>
                    <p class="subtitle mb-5">If you want your dream business to give a magnificent digital look, then Okala themes are the best option. Okala will provide you with specialties that no other theme can provide. You will get the total 24/7 technical support. We are a strategic, creative team</p>
                    <a href="#" class="da-custom-btn btn-border-radius40 text-uppercase"><span>join the Team</span></a>
                </div>
            </div>
            <div class="col-lg-8 p-0 order-lg-first left-100">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="da-team-item text-center mb--30 mb_lg--0">
                            <div class="team-thumb">
                                <img src="assets/images/digital-agency/team/01.jpg" alt="team member">
                            </div>
                            <div class="team-content">
                                <h4 class="name">John Trudo</h4>
                                <p class="designation">CEO</p>
                                <ul class="da-social-media-list d-flex flex-wrap justify-content-between list-unstyled justify-content-center">
                                    <li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a class="behence" href="#"><i class="fab fa-behance"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="da-team-item text-center mb--30">
                            <div class="team-thumb">
                                <img src="assets/images/digital-agency/team/02.jpg" alt="team member">
                            </div>
                            <div class="team-content">
                                <h4 class="name">Sam Bebister</h4>
                                <p class="designation">Interface Designer</p>
                                <ul class="da-social-media-list d-flex flex-wrap justify-content-between list-unstyled justify-content-center">
                                    <li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a class="behence" href="#"><i class="fab fa-behance"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="da-team-item text-center mb--30 mb_lg--0">
                            <div class="team-thumb">
                                <img src="assets/images/digital-agency/team/03.jpg" alt="team member">
                            </div>
                            <div class="team-content">
                                <h4 class="name">Phoebe Buffey</h4>
                                <p class="designation">3D Designer</p>
                                <ul class="da-social-media-list d-flex flex-wrap justify-content-between list-unstyled justify-content-center">
                                    <li><a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="fab fa-twitter"></i></a></li>
                                    <li><a class="linkedin" href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a class="behence" href="#"><i class="fab fa-behance"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--  team section end -->
<!-- testimonial section start -->
<section class="da-testimonial-section bg-ash-color pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container">
        <div class="section-header text-center">
            <h6 class="subtitle-top font-weight-normal text-uppercase mb-2">testimonial</h6>
            <h3 class="title mb-3">What People Say</h3>
            <p class="subtitle mb-5">Squarespace powers millions of websites across hundreds <br> of industries for people just like you. </p>
        </div>
    </div>
    <div class="container">
        <div class="da-testimonial-container da-testimonial-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="testimonial-body d-flex flex-wrap justify-content-between">
                        <div class="author-image">
                            <img src="assets/images/digital-agency/testimonial/01.jpg" alt="author">
                        </div>
                        <div class="testimonial-content">
                            <i class="qoute-icon fas fa-quote-left"></i>
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="text">I was looking for a clean modern template for my blog and then I came across Okala. It was exactly what I was looking for. I wish them best of luck for the future.</p>
                            <h6 class="name">John Dewrer</h6>
                            <p class="designation mb-0">UI Designer</p>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonial-body d-flex flex-wrap justify-content-between">
                        <div class="author-image">
                            <img src="assets/images/digital-agency/testimonial/02.jpg" alt="author">
                        </div>
                        <div class="testimonial-content">
                            <i class="qoute-icon fas fa-quote-left"></i>
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="text">Not able to tell you how happy I am with Okala. Your theme helped my company to have a new outlook. That creates effects on annual sales also. Should try Okala.</p>
                            <h6 class="name">Cynthia Rex</h6>
                            <p class="designation mb-0">Designer</p>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonial-body d-flex flex-wrap justify-content-between">
                        <div class="author-image">
                            <img src="assets/images/digital-agency/testimonial/03.jpg" alt="author">
                        </div>
                        <div class="testimonial-content">
                            <i class="qoute-icon fas fa-quote-left"></i>
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="text">Okala has consistently grown our traffic for over years. We started with the theme and now do social media marketing.Okalas multipurpose theme is the best</p>
                            <h6 class="name">White Fang</h6>
                            <p class="designation mb-0">MD</p>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="testimonial-body d-flex flex-wrap justify-content-between">
                        <div class="author-image">
                            <img src="assets/images/digital-agency/testimonial/04.jpg" alt="author">
                        </div>
                        <div class="testimonial-content">
                            <i class="qoute-icon fas fa-quote-left"></i>
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="text">Okala is one of the best software partners that we ever have. Following the software deployment, sales revenue has increased by over 40%. Go, team Okala</p>
                            <h6 class="name">Marry Moore</h6>
                            <p class="designation mb-0">CEO</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- testimonial section end -->
<!-- client logo section start -->
<section class="da-client-logo-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container mb-5 pb-3">
        <div class="row align-items-center">
            <div class="col-lg-3">
                <div class="section-header text-center text-lg-left">
                    <h3 class="title">
                        Trusted by<br>
                        the world’s best
                    </h3>
                </div>
            </div>
            <div class="col-lg-4 offset-lg-5">
                <p class="mb-0">Clients' satisfaction is their ultimate goal. Okala has a stable client base, let's check their comments.</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="da-client-logo-container da-client-logo-container1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/01.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/02.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/03.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/04.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/05.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/01.png" alt="logo">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="client-logo text-center">
                        <img src="assets/images/digital-agency/client-logo/02.png" alt="logo">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- client logo section end -->
<!--pricing section start -->
<section class="da-pricing-section pt--60 pb--60 pt_lg--100 pb_lg--100 bg-ash-color">
    <div class="shape1">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 126">
            <path id="XMLID_132_" class="st0" d="M40.9,117C5.4,99.5-9.1,56.5,8.4,21.1c17.5-35.4,43.2-15.5,78.7,2.1s67.2,26,49.6,61.4
            C119.2,120,76.3,134.5,40.9,117z" />
        </svg>
    </div>
    <div class="circle1">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_15_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="circle2">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_16_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="circle3">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_17_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="circle4">
        <svg x="0px" y="0px"
             viewBox="0 0 141.7 141">
            <circle id="XMLID_18_" class="st0" cx="71" cy="70" r="69" />
        </svg>
    </div>
    <div class="container">
        <div class="section-header text-center mb-5 pb-4">
            <h6 class="subtitle-top font-weight-normal text-uppercase mb-2">Price List</h6>
            <h3 class="title mb-0">
                Standard Price<br>
                for Premium Services
            </h3>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="da-pricing-item text-center mb--60 mb_lg--0">
                    <div class="pricing-head">
                        <div class="category-type"><span>Basic</span></div>
                        <div class="price"><span class="dollar-sign">$</span>25 <span class="per-time">/mo.</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-feature-list list-unstyled mb-5 pl-0 text-center;">
                            <li>Live Support</li>
                            <li>Free Updates</li>
                            <li>Customization</li>
                            <li>Unlimited Features</li>
                        </ul>
                        <a href="#" class="da-custom-btn text-uppercase btn-border-radius40 sm-btn"><span>Sign Up</span></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="da-pricing-item active text-center mb--60 mb_lg--0">
                    <div class="pricing-head">
                        <div class="category-type"><span>Pro</span></div>
                        <div class="price"><span class="dollar-sign">$</span>45 <span class="per-time">/mo.</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-feature-list list-unstyled mb-5 pl-0 text-center;">
                            <li>Live Support</li>
                            <li>Free Updates</li>
                            <li>Customization</li>
                            <li>Unlimited Features</li>
                        </ul>
                        <a href="#" class="da-custom-btn text-uppercase btn-border-radius40 sm-btn"><span>Sign Up</span></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="da-pricing-item text-center mb--60 mb_lg--0">
                    <div class="pricing-head">
                        <div class="category-type"><span>Optimal</span></div>
                        <div class="price"><span class="dollar-sign">$</span>75 <span class="per-time">/mo.</span></div>
                    </div>
                    <div class="pricing-body">
                        <ul class="pricing-feature-list list-unstyled mb-5 pl-0 text-center;">
                            <li>Live Support</li>
                            <li>Free Updates</li>
                            <li>Customization</li>
                            <li>Unlimited Features</li>
                        </ul>
                        <a href="#" class="da-custom-btn text-uppercase btn-border-radius40 sm-btn"><span>Sign Up</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--pricing section end -->



<section class="da-blog-section pt--60 pb--60 pt_lg--100 pb_lg--100">
    <div class="container">
        <div class="section-header text-center mb-5 pb-4">
            <h6 class="subtitle-top font-weight-normal text-uppercase mb-2">Blog</h6>
            <h3 class="title mb-0">Recent Blog Posts</h3>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="da-post-item">
                    <div class="post-thumb">
                        <a href="#"><img src="assets/images/homepage-agency/blog/01.jpg" alt="team thumb"></a>
                    </div>
                    <div class="post-content">
                        <ul class="meta-post pl-0 list-unstyled">
                            <li>August 1, 2019</li>
                        </ul>
                        <h6 class="title"><a href="#">Become a Successful Entrepreneur</a></h6>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="da-post-item">
                    <div class="post-thumb">
                        <a href="#"><img src="assets/images/homepage-agency/blog/02.jpg" alt="team thumb"></a>
                    </div>
                    <div class="post-content">
                        <ul class="meta-post pl-0 list-unstyled">
                            <li>August 1, 2019</li>
                        </ul>
                        <h6 class="title"><a href="#">The new year offers of Okala that is happening now</a></h6>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="da-post-item">
                    <div class="post-thumb">
                        <a href="#"><img src="assets/images/homepage-agency/blog/03.jpg" alt="team thumb"></a>
                    </div>
                    <div class="post-content">
                        <ul class="meta-post pl-0 list-unstyled">
                            <li>August 1, 2019</li>
                        </ul>
                        <h6 class="title"><a href="#">The secret of project success matrix in theme Business</a></h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- newsletter section start-->
<section class="da-newsletter-section pt--60 pb--60 pt_lg--200 pb_lg--150 text-center">
    <div class="container">
        <div class="section-header mb--45">
            <h3 class="title mb-0 text-white">Subscribe to Our Weekly Blog</h3>
        </div>
    </div>
    <div class="container">
        <div class="newsletter-container">

            <form class="da-newsletter-form text-center text-sm-left" action="#">
                <input type="text" name="email" placeholder="Enter Your Email">
                <button class="da-custom-btn sm-btn btn-border-radius40 btn-solid">
                    <span>Submit</span>
                </button>
            </form>
        </div>
    </div>
</section>
<!-- newsletter section end-->
